<template>
  <div class="row">
    <div class="input">
      <input 
        v-bind:id="inputId"
        class="toggle toggle-yes-no"
        type="checkbox"
        v-bind:checked="checked"
        v-on:change="updateValue($event.target.checked)"
      >
      <label
        v-bind:for="inputId"
        v-bind:data-on="textOn"
        v-bind:data-off="textOff"
      ></label>
    </div>
    <div class="label">
      <span>{{ title }}</span>
      <small>{{ desc }}</small>
    </div>
    <div class="preview" v-html="preview"></div>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: ['checked', 'inputId', 'textOn', 'textOff', 'title', 'desc', 'preview'],
  methods: {
    updateValue: function(value) {
      this.$emit('change', value);
    }
  }
}
</script>

